<template>
  <div class="member">
    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <div class="step"><i class="el-icon-edit"></i> 步骤 1</div> </el-col
      ><el-col :span="6">
        <div class="step"><i class="el-icon-upload"></i> 步骤 2</div>
      </el-col>
      <el-col :span="12" >
        <div class="step"><i class="el-icon-circle-check"></i> 步骤 3</div>
      </el-col>
    </el-row> -->
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <div class="step"><i class="el-icon-edit"></i> 步骤 1</div> 
        <el-card
          class="extract-card"
          shadow="hover"
          body-style="height:calc(100% - 80px);overflow:auto;"
        >
          <template #header>
            <div class="card-header">
              <h3 class="member-title">提取会员号</h3>
              <el-button
              v-show="textarea"
                class="extract"
                type="primary"
                @click="extract"
                icon="el-icon-edit"
                size="mini"
                plain
                >提取</el-button
              >
            </div>
          </template>
          <!-- <h3 class="member-title">提取会员号</h3> -->
          <el-input
            class="vipInput"
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <div class="step"><i class="el-icon-upload"></i> 步骤 2</div>
        <el-card
          class="extract-card"
          shadow="hover"
          body-style="height:calc(100% - 80px);overflow:auto;"
        >
          <!-- style="height:calc(100vh - 130px)"  -->
          <template #header>
            <div class="card-header">
              <h3 class="member-title">待注册会员列表</h3>
              <transition name="el-zoom-in-center">
                <el-button
                  v-show="signup.length"
                  class="extract"
                  type="primary"
                  :loading="Loading"
                  @click="register"
                  icon="el-icon-upload"
                  size="mini"
                  plain
                  >注册</el-button
                >
              </transition>
            </div>
          </template>

          <el-collapse-transition>
            <div class="extract-tags" v-show="signup.length">
              <div
                class="extract-tag"
                :class="{ error: value.length != 8 }"
                v-for="(value, index) in signup"
                :key="index"
              >
                {{ value }}
              </div>
            </div>
          </el-collapse-transition>

          
            <!-- <div v-show="errorList.length">
              <div class="card-header">
                <h3 class="member-title">失败列表</h3>
                <el-button
                  v-show="signup.length"
                  class="extract"
                  type="error"
                  :loading="Loading"
                  @click="retry"
                  icon="el-icon-upload"
                  size="mini"
                  plain
                  >重试</el-button
                >
              </div>
              <div class="extract-tags">
                <div
                  class="extract-tag"
                  :class="{ error: value.length != 8 }"
                  v-for="(value, index) in errorList"
                  :key="index"
                >
                  {{ value }}
                </div>
              </div>
            </div> -->
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <div class="step"><i class="el-icon-circle-check"></i> 步骤 3</div>
        <el-card shadow="hover">
            <div class="card-header" >
             <h3 class="member-title">注册返回状态</h3>
           <el-button
           v-show="errorList.length"
                  class="extract"
                  type="danger"
                  :loading="Loading"
                  @click="retry"
                  icon="el-icon-upload"
                  size="mini"
                  plain
                  >重试</el-button
                >
            </div>
          
          <el-table
            :data="resultLits"
            border
            v-loading="Loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="width: 100%"
            height="calc(100vh - 230px)"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              :prop="'name'"
              label="会员号"
              width="100"
              sortable
            ></el-table-column>
            <el-table-column
              :prop="'status'"
              label="状态"
              sortable
            ></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { registerVip } from "@/api/echarts";
import { reactive, toRefs } from "@vue/reactivity";
export default {
  setup() {
    const data = reactive({
      signup: [],
      textarea: "",
      resultLits: "",
      Loading: false,

      errorList: [],
    });
    const register = async () => {
      data.Loading = true;
      const result = await registerVip.post({
        register: data.signup,
      });
      data.Loading = false;
      data.errorList=[];
      result.data.forEach((ele) => {
        if (!ele.status.includes("success")) {
          data.errorList.push(ele.name);
        }
        ele.status = ele.status.replace(/(\\u)(\w{1,4})/gi, function ($0) {
          return String.fromCharCode(
            parseInt(escape($0).replace(/(%5Cu)(\w{1,4})/g, "$2"), 16)
          );
        });
      });
      data.resultLits = result.data;
    };
    const extract = () => {
      data.signup = data.textarea.match(/-?([1-9]\d*(\.\d*)*|0\.[1-9]\d*)/g);
      console.log(data.signup);
    };
    const retry=()=>{
      data.signup=data.errorList;
      register();
    }
    return { ...toRefs(data), register, extract, retry };
  },
};
</script>
<style scoped>
.member {
  margin: 20px;
}
.extract-card {
  height: calc(100vh - 160px);
  overflow: auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:30px;
}
.step {
  word-break: break-all;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  margin: 5px;
}
.extract-tags {
  display: flex;
  flex-wrap: wrap;
}
.extract-tag {
  border: 1px solid #d9ecff;
  padding: 0 8px;
  color: #409eff;
  margin: 0 10px 10px 0;
  background: #ecf5ff;
  border-radius: 2px;
}
.extract-tag.error {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
</style>